﻿@page "/"

<MudContainer MaxWidth="MaxWidth.False">
    <MudGrid>
        <MudItem md="8"
                 sm="12"
                 xs="12">
            <MudPaper Class="pa-4"
                      Elevation="2"
                      Style="height: 250px; background: var(--mud-palette-primary)">
            </MudPaper>
        </MudItem>
        <MudItem md="4"
                 sm="12"
                 xs="12">
            <MudPaper Class="pa-4"
                      Elevation="2"
                      Style="height: 250px; background: #405f6c">
            </MudPaper>
        </MudItem>
        <MudItem md="4"
                 sm="12"
                 xs="12">
            <DataCard ChartId="chartOne"
                      IncreaseDecrease="IncreaseDecreaseActiveUsers"
                      LastTenDays="_lastTenDaysActiveUsers"
                      Title="Total Active Users"
                      Total="TotalActiveUsers" />
        </MudItem>
        <MudItem md="4"
                 sm="12"
                 xs="12">
            <DataCard ChartId="chartTwo"
                      BarColor="@Colors.Blue.Default"
                      IncreaseDecrease="IncreaseDecreaseInstalls"
                      LastTenDays="_lastTenDaysInstalls"
                      Title="Total Installed"
                      Total="TotalInstalls" />
        </MudItem>
        <MudItem md="4"
                 sm="12"
                 xs="12">
            <DataCard ChartId="chartThree"
                      BarColor="@Colors.Orange.Default"
                      IncreaseDecrease="IncreaseDecreaseDownloads"
                      LastTenDays="_lastTenDaysDownloads"
                      Title="Total Downloads"
                      Total="TotalDownloads" />
        </MudItem>
        <MudItem md="6"
                 sm="12">
            <CurrentDownload />
        </MudItem>
        <MudItem md="6"
                 sm="12">
            <AreaInstalled />
        </MudItem>
        <MudItem sm="12">
            <MudPaper Class="pa-4"
                      Elevation="2"
                      Style="height: 500px;">
            </MudPaper>
        </MudItem>
        <MudItem md="6"
                 sm="12">
            <MudPaper Class="pa-4"
                      Elevation="2"
                      Style="height: 350px;">
            </MudPaper>
        </MudItem>
        <MudItem md="6"
                 sm="12">
            <MudPaper Class="pa-4"
                      Elevation="2"
                      Style="height: 300px;">
            </MudPaper>
        </MudItem>
        <MudItem sm="6"
                 xs="12">
            <MudGrid>
                <MudItem xs="12">
                    <MudPaper Class="pa-4"
                              Elevation="2"
                              Style="height: 200px;">
                    </MudPaper>
                </MudItem>
                <MudItem xs="12">
                    <MudPaper Class="pa-4"
                              Elevation="2"
                              Style="height: 200px;">
                    </MudPaper>
                </MudItem>
            </MudGrid>
        </MudItem>
        <MudItem sm="6"
                 xs="12">
            <MudPaper Class="pa-4"
                      Elevation="2"
                      Style="height: 100%">
            </MudPaper>
        </MudItem>
    </MudGrid>
</MudContainer>